<!--弹窗-信息框-->
<template>
	<view>
		<mescroll-uni ref="mescrollRef" :fixed="false" height="100%" @init="mescrollInit" :top="top" :bottom="bottom" :up="upOption" @down="downCallback" @up="upCallback">
			<slot></slot>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		props: {
			fetch: Function, // 请求接口
			listKey: String, // 列表请求返回的字段key
			reload: Boolean,
			top: { // 下拉刷新区域往下偏移的距离
				type: [Number, String],
				default: 0
			},
			bottom: { // 上拉加载区域往上偏移的距离
				type: [Number, String],
				default: 0
			},
			pageSize: { // 一页加载数量
				type: Number,
				default: 10
			},
			queryModel: { // 查询参数
				type: Object,
				default: null
			},
			list: Array, // 列表数据
			emptyTip: { // 无数据提示信息
				type: String,
				default: '暂无数据哦~'
			}
		},
		data() {
			return {
				listData: [], // 列表数据
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					page: {
					    num: 0, // 当前页 从1开始
					    size: this.pageSize, // 每页数据条数,默认10
					    time: null
					},
					textNoMore: '只有这么多了(-.-)', // 没有更多数据的提示文本
					empty: {
						icon: '/static/img/nodata.png', // 空图片
						tip: this.emptyTip
					}
				},
				status: 'more', // 加载更多状态：more（loading前）、loading（loading中）、noMore（没有更多了）
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				total: 0, // 总数据量
				inited: false, // 是否请求数据
				queryData: this.queryModel
			}
		},
		watch: {
			queryModel: {
				handler(val){
				    this.queryData = Object.assign({}, val);
				},
				deep: true
			}
		},
		methods: {
			// 获取列表数据
			loadData() {
				// this.$nextTick(()=>{
				// 	if (this.list) {
				// 		this.listData = this.list;
				// 		this.mescroll.endSuccess();
				// 		this.$emit('loaded', this.listData)
				// 		return;
				// 	}
				// 	this.listData = [];
				// 	this.mescroll.resetUpScroll();
				// });
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.$emit('loaded')
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.$emit('getMore')
				this.mescroll.endSuccess();
				setTimeout(()=> {
					this.mescroll.showNoMore()
				}, 3000)
				
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .mescroll-empty {
		padding: 200upx 50upx;
		.empty-icon {
			margin-bottom: 60upx; 
		}
		.empty-tip {
			font-size: 28upx;
		}
	}
</style>